<template>
    <div class="con">
        <div class="lwy-back">
            <router-link to="/happyhome/leisure/keepinglive"><i class="el-icon-arrow-left"></i>返回首页</router-link>
        </div>
        <div class="jielu">
            <router-link to="/HappyHome/leisure/keedaka" style="text-decoration: none;">
                <p>体重记录</p>
            </router-link>
            <router-link to="/happyhome/leisure/keeweight" style="text-decoration: none;">
                <p>运动记录</p>
            </router-link>
        </div>

        <div class="contain">

            

            <div class="tab">


                <div class="tab-title" v-for="(item, index) in ditu" :key="index">
                    <div class="aa">
                        <div>
                            <el-button :class="['tab-item', activeIndex === index ? 'change' : '']"
                                @click="btnClick(index)">
                                {{ item.name }}
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main">

                <div class="sub-main" v-for="(item, index) in subFoodList" :key="index">

                    <div class="img">
                        <!-- <img :src="item.img"> -->
                        <video muted="muted" class="video" :src="item.path" type="video/mp4" :img="item.poster"
                            autoplay:false controls="controls" loop="-1">
                        </video>
                        <div class="itt">{{ item.font }}</div>
                        <div>
                            <router-link to="/HappyHome/work/clocks">
                                <el-button @click="butn" type="button" class="el-button--primary">完成训练</el-button>
                            </router-link>
                        </div>
                    </div>




                </div>

            </div>
        </div>
        <div>

        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            activeIndex: 0,
            index: 0,
            a1: true,
            show: true,
            drawer: false,
            // deadline3: Date.now() + 1000 * 60 * 30,
            deadline4: Date.now(),
            stop: true,
            value: '',
            // 假设后端返回的数组对象
            ditu: [
                {
                    children: [
                        {

                        },
                    ],
                },

            ],
            // 二级内容
            subFoodList: [],
            // 默认索引 0
            activeIndex: 0,
            ditu: []
        }
    },
    methods: {
        butn() {
            alert('太厉害了吧，小朋友，快去打卡记录一下吧')
        },

        open() {
            this.$notify({
                title: 'ok',
                message: '为你增加+60秒',
                type: 'success',
                position: 'bottom-right',
                duration: 600,
            })
        },
        hilarity() {
            this.$notify({
                title: '提示',
                message: '时间已经到了哦',
                duration: 1000,
                position: 'bottom-right'
            });
        },
        clickFn() {
            this.$refs.statistic.suspend(this.stop);
            this.stop = !this.stop;
            // console.log(this.stop);
        },
        add() {
            this.deadline4 = this.deadline4 + 1000 * 60 * 1;
            console.log(this.deadline4);
        },
        render() {
            axios({
                url: '/dbdata/ditu',
            }).then(({ data }) => {
                this.ditu = data
                this.subFoodList = this.ditu[0].children;
            });
        },

        onSubmit() {
            axios({
                url: '/dbdata/ditu',
            }).then(({ data }) => {
                this.ditu = data
                this.activeIndex = index;
                this.subFoodList = this.ditu[index].children;

            });
        },

        btnClick(index) {
            console.log("ok");
            this.activeIndex = index;
            this.subFoodList = this.ditu[index].children;
            console.log(this.activeIndex);
        },
    },
    mounted() {
        this.render();

    },
};
</script>
<style lang="less" scoped>
.jielu {
    display: flex;
    width: 150px;
    //    display: inline-block;
    margin-left: 20px;
    cursor: pointer;
    justify-content: space-between;

    // border: 1px solid red;
    p {
        color: #000;

        &:hover {
            color: #007bff;
        }
    }
}



.itt {
    margin: auto;
    text-align: center;
    margin-top: 10px;
    width: 260px;
    height: 110px;
    // border: 1px solid red;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    // text-overflow: ellipsis;
}

.time {
    display: block;
    width: 200px;
    height: 200px;
    margin-left: 1000px;
    margin-top: 200px;
    background-color: rgba(250, 235, 215, 0.822);
}

video {
    object-fit: fill;
}

.img {
    float: left;
    width: 270px;
    margin-top: 20px;
    height: 400px;
    margin-bottom: 40px;
    color: #ffffff;
    border: 2px solid rgba(177, 226, 255, 0.588);
    border-radius: 2em;

    .video {
        border-radius: 2em 2em 0.25em 0.25em;
        // margin-top: -20px;
        overflow: hidden;
        width: 270px;
        height: 200px;
        margin-top: 0;
    }

    &:hover {

        box-shadow: 3px 5px 5px rgba(255, 251, 212, 0.924);
    }

    .el-button {
        margin-top: 10px;
    }

}

.contain {
    display: flex;
    background: url('../../assets/image/zlj/bg.gif');
    // background: url('https://video-js.51miz.com/preview/video/00/00/15/33/V-153302-67A4A1DF.mp4');
    // background: url('../assets/image/zlj/bg.gif');
    height: 100%;
    width: 100%;
    color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 0;

}

.img-b {
    margin: auto;
    margin-top: 100px;
    width: 400px;
    height: 100px;

    button {
        width: 80px;
        height: 40px;
        margin: 20px;

    }
}

.img-b-a {

    display: flex;
    justify-content: space-between;
}

.aa {
    // padding-left: 10px;
    margin-bottom: 20px;
    line-height: 50px;
    display: flex;
    margin-left: 20px;
    border-radius: 15px;
    justify-content: space-between;
    margin-top: 20px;

    // &:hover {
    //     box-shadow: 3px 5px 5px #777773d7;
    // }

    .el-button {
        margin-right: 10px;
    }
}

.main {
    width: 98%;
    display: flex;

    height: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 5%;
}



.footer {
    height: 100px;
    margin-top: -100px;

    .font {
        line-height: 100px;
    }
}

.lwy-back {
    text-align: left;
    margin-left: 5px;
    margin-top: 20px;

    a:-webkit-any-link {
        color: rgba(00, 00, 00, 0.67);
        text-decoration: none;

        .el-icon-arrow-left {
            margin-right: 5px;
        }
    }

}

.el-button--primary {
    background-color: rgb(255, 233, 192);
    color: rgba(00, 00, 00, 0.8);
    border-color: rgb(255, 233, 192);
}

.el-button--primary:hover {
    background-color: rgba(255, 233, 192, 0.8);
    color: rgba(00, 00, 00, 0.5);
    border-color: rgba(255, 233, 192, 0.8);
}
</style>
